<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket连接测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .status { padding: 10px; margin: 10px 0; border-radius: 3px; }
        .connected { background-color: #d4edda; color: #155724; }
        .disconnected { background-color: #f8d7da; color: #721c24; }
        .message { background-color: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 3px; }
        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        button:disabled { background: #6c757d; cursor: not-allowed; }
    </style>
</head>
<body>
    <h1>WebSocket连接测试</h1>
    
    <div class="test-section">
        <h3>连接状态</h3>
        <div id="connectionStatus" class="status disconnected">未连接</div>
        <button onclick="connectWebSocket()">连接WebSocket</button>
        <button onclick="disconnectWebSocket()">断开连接</button>
        <button onclick="sendTestMessage()">发送测试消息</button>
    </div>
    
    <div class="test-section">
        <h3>消息日志</h3>
        <div id="messageLog"></div>
        <button onclick="clearLog()">清空日志</button>
    </div>
    
    <div class="test-section">
        <h3>用户ID设置</h3>
        <input type="text" id="userIdInput" value="operator_001" placeholder="输入用户ID">
        <button onclick="updateUserId()">更新用户ID</button>
    </div>

    <script>
        let ws = null;
        let currentUserId = 'operator_001';
        
        function connectWebSocket() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                addMessage('WebSocket已连接，无需重复连接', 'info');
                return;
            }
            
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws?user_id=${currentUserId}`;
            
            addMessage(`正在连接到: ${wsUrl}`, 'info');
            
            ws = new WebSocket(wsUrl);
            
            ws.onopen = function() {
                updateConnectionStatus(true);
                addMessage('WebSocket连接已建立', 'success');
            };
            
            ws.onmessage = function(event) {
                try {
                    const message = JSON.parse(event.data);
                    addMessage(`收到消息: ${JSON.stringify(message, null, 2)}`, 'message');
                } catch (error) {
                    addMessage(`收到原始消息: ${event.data}`, 'message');
                }
            };
            
            ws.onclose = function() {
                updateConnectionStatus(false);
                addMessage('WebSocket连接已关闭', 'warning');
            };
            
            ws.onerror = function(error) {
                addMessage(`WebSocket错误: ${error}`, 'error');
            };
        }
        
        function disconnectWebSocket() {
            if (ws) {
                ws.close();
                ws = null;
                updateConnectionStatus(false);
                addMessage('主动断开WebSocket连接', 'info');
            }
        }
        
        function sendTestMessage() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const message = {
                    type: 'ping',
                    data: 'test message',
                    timestamp: new Date().toISOString()
                };
                ws.send(JSON.stringify(message));
                addMessage(`发送消息: ${JSON.stringify(message)}`, 'info');
            } else {
                addMessage('WebSocket未连接，无法发送消息', 'error');
            }
        }
        
        function updateConnectionStatus(connected) {
            const statusDiv = document.getElementById('connectionStatus');
            if (connected) {
                statusDiv.textContent = '已连接';
                statusDiv.className = 'status connected';
            } else {
                statusDiv.textContent = '未连接';
                statusDiv.className = 'status disconnected';
            }
        }
        
        function addMessage(text, type = 'info') {
            const logDiv = document.getElementById('messageLog');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}`;
            messageDiv.innerHTML = `<strong>[${new Date().toLocaleTimeString()}]</strong> ${text}`;
            logDiv.appendChild(messageDiv);
            logDiv.scrollTop = logDiv.scrollHeight;
        }
        
        function clearLog() {
            document.getElementById('messageLog').innerHTML = '';
        }
        
        function updateUserId() {
            const userIdInput = document.getElementById('userIdInput');
            currentUserId = userIdInput.value || 'operator_001';
            addMessage(`用户ID已更新为: ${currentUserId}`, 'info');
        }
        
        // 页面加载时自动连接
        window.onload = function() {
            addMessage('页面加载完成，可以开始测试WebSocket连接', 'info');
        };
    </script>
</body>
</html>

